<template>
    <div class="main" style="height: 300px">
        <v-chart :option="option" class="echart"></v-chart>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { mapStore } from '@/store';
import axios from 'axios';
import { event } from '@/hooks/eventHook';
const store = mapStore()
const option = ref()
const count = ref(1)
onMounted(async () => {
    const res = await axios.get('http://39.103.151.139:8000/gis/event')
    res.data.features.forEach(item_ => {
        let index = store.event.findIndex(item => item.name == item_.properties.name)
        if (index === -1) {
            store.event.push({
                count: count.value,
                name: item_.properties.name,
            })
        } else {
            store.event[index].count++
        }
    })
    renderEchart(store.event.map(item => item.name), store.event.map(item => item.count))
})

function renderEchart(data1, data2) {
    option.value = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) { // 自定义tooltip的内容格式化
                console.log(params)
                let tooltipContent = params[0].name + '<br>'; // 第一个参数的名称
                for (let i = 0; i < params.length; i++) {
                    tooltipContent += params[i].marker + '事故次数' + ' : ' + params[i].value + '<br>'; // 每个系列的名称和值
                    // 可根据需要添加更多信息，例如颜色、数据等
                }
                return tooltipContent;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data1,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#fff',
                }
            },

        ],
        yAxis: [
            {
                type: 'value',
                interval: 1,
                axisLabel: {
                    color: '#fff',
                },
                // axisLine: {
                //     show: false  // 设置为false隐藏纵坐标轴线
                // },
            },

        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: data2,
                itemStyle: {
                    color: 'pink'
                },
                barWidth: '40%',
            }
        ]
    };
}

watch(store.addLists, (newvalue) => {
    if (newvalue.length > 5) {
        const arr = newvalue.slice(-1)
        console.log(arr)
        let index = store.event.findIndex(item => item.name == arr[0].name)
        if (index === -1) {
            store.event.push({
                count: count.value,
                name: arr[0].name
            })
        } else {
            store.event[index].count++
        }
        console.log(store.event)
        renderEchart(store.event.map(item => item.name), store.event.map(item => item.count))
    }

})
</script>

<style scoped lang="scss">
.main {
    position: fixed;
    bottom: 20%;
    right: 0%;
    z-index: 1000;

    .echart {
        width: 300px;
    }
}
</style>
